<template>
    <el-upload
        :action="action||href"
        :multiple="multiple"
        :limit="limit||3"
        :on-exceed="handleExceed"
        :on-success="handleSuccess"
        :on-remove="handleRemove"
        :on-progress="handleProgress"
        :before-remove="beforeRemove"
        :on-change="handleChange"
        :file-list="fileList1"
        :accept="accept"
        :list-type="listType"
        :show-file-list="showFileList"
        :data="params||uploadParams"
        :drag="drag">
        <div v-if="drag">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <slot name="tip">
                <div class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </slot>
        </div>
        <div v-else>
            <slot name="trigger">
                <el-button type="primary" :size="size || 'small'">选择文件</el-button>
            </slot>
            <slot name="tip">
                <span class="tip ml10" :class="size" v-if="fileList.length<1">未选择任何文件</span>
            </slot>
        </div>
        <slot></slot>
    </el-upload>
</template>

<script>
    import {mapGetters} from 'vuex'

    export default {
        name: '',
        props: ['action', 'size', 'multiple', 'limit', 'accept', 'listType', 'drag', 'fileList', 'badge', 'showFileList', 'params'],
        data() {
            return {
                fileList1: [],
                href: 'http://192.168.1.95:50013/file/upload',
                uploadParams: {auth: 1}
            }
        },
        watch: {
            fileList(val) {
                this.init(val)
            }
        },
        mounted() {
            if (this.user) this.href = this.user.uploadUrl
            if (this.fileList) this.init(this.fileList)
        },
        methods: {
            init(val) {
                this.fileList1 = val.map(item => {
                    if (item.fileName) item.name = item.fileName
                    if (item.path) item.url = item.path
                    if (item.fileSize) item.size = item.fileSize
                    if (item.createTime) item.date = item.createTime
                    return item
                })
            },
            handleSuccess(response, file, fileList) {
                this.$http.responseSuccess(response)
                if (response.success) {
                    this.$emit('update:fileList', this.initFileList(file, fileList))
                }
                this.$emit('success', response, file, fileList)
            },
            handleProgress(event, file, fileList) {
                this.$emit('progress', event, file, fileList)
            },
            handleRemove(file, fileList) {
                this.$emit('update:fileList', this.initFileList(file, fileList))
            },
            handleChange(file, fileList) {
                this.$emit('change', file, this.initFileList(file, fileList), this.badge)
            },
            handleExceed(files, fileList) {
                this.$message.warning({
                    message: `当前限制选择 ${this.limit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`,
                    showClose: true
                })
            },
            beforeRemove(file, fileList) {
                return new Promise((resolve, reject) => {
                    this.$confirm(`确定移除 ${file.name}？`, '提示').then(function () {
                        resolve(file, fileList)
                    }).catch(function (err) {
                        reject(err)
                    })
                })
            },
            handleError(file, fileList) {
                this.$message.warning({
                    message: '文件上传失败',
                    showClose: true
                })
            },
            initFileList(file, fileList) {
                let array = []
                if (file.response && !file.response.success) {
                    this.$method.messageBox('alert', file.response.message)
                } else {
                    if (fileList.length > 0) {
                        fileList.forEach((item, index) => {
                            array.push({
                                id: item.id || (item.response ? item.response.data.id : ''),
                                size: item.size,
                                name: item.name,
                                uid: item.uid,
                                status: item.status || 'success',
                                type: item.type || (item.raw ? item.raw.type : null),
                                url: item.response ? item.response.data.path : item.url,
                                date: item.date || this.$filter.timeFormat(new Date(), 'YYYY.MM.DD hh:mm:ss')
                            })
                        })
                    }
                    return array
                }
            }
        },
        components: {},
        computed: {
            ...mapGetters([
                'user'
            ])
        }
    }
</script>

<style scoped lang="less">
</style>
